<script setup lang="ts">
  import { ref } from 'vue';
  const list = ref([
    {id: 0, title: "生死簿", icon: 'Reading', url: ''},
    {id: 1, title: "查询寿命", icon: 'Search', url: ''},
    {id: 2, title: "入境管理", icon: 'Download', url: ''},
    {id: 3, title: "重新投胎", icon: 'Switch', url: ''},
    {id: 4, title: "货币管理", icon: 'Key', url: ''},
    {id: 5, title: "操作日志", icon: 'Tickets', url: ''},
    {id: 6, title: "十八层地狱", icon: 'School', url: ''},
    {id: 7, title: "发勾魂单", icon: 'Van', url: ''},
    {id: 8, title: "资产管理", icon: 'Suitcase', url: ''},
    {id: 9, title: "员工管理", icon: 'User', url: ''},
    {id: 10, title: "营销管理", icon: 'Notebook', url: ''},
    {id: 11, title: "百鬼夜行", icon: 'Moon', url: ''},
  ]);
</script>

<template>
  <div class="z-col home-often">
    <div class="z-flex-justify-between z-flex-align-center box">
      <span class="z-t-bold">常用功能导航</span>
      <el-icon><Icon icon="MoreFilled"/></el-icon>
    </div>
    <div class="home-often-list z-flex-wrap">
      <div class="home-often-item" v-for="item in list" :key="item.id">
        <div class="item z-flex-column-center">
          <div class="home-often-item-icon z-flex-center z-br-100">
            <el-icon class="z-font-18"><Icon :icon="item.icon"/></el-icon>
          </div>
          <p class="z-m-t-10 z-font-14">{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-often{
  display: flex;
  flex-direction: column;
  .home-often-list {
    flex: 1;
    padding-bottom: 16px;
  }
  .home-often-item{
    width: 16.66666%;
    padding: 10px 8px;
  }
  .item {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    transition: all .3s;
    cursor: pointer;
    &:hover {
      box-shadow: 0 2px 12px 2px rgba(255,255,255, .1);
      transform: translateY(-2px);
    }
  }
  .home-often-item-icon{
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .5);
  }
}
</style>